<template>
    <div class="footerContainer">
        <div class="footer">
            <div class="firstFooter">
                <div class="flex mt-2">
                    <img loading="lazy" alt="apkdock icon" src="/title.png"/>
                </div>
                <div class="description">
                    APKDock is a multi-platform application store dedicated to the Android platform. Our aim is to
                    provide
                    users with unrestricted, free and open access to the application directory, as access through its
                    official native applications.
                </div>
                <div class="icon">
                    <a href="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
                            <path
                                d="M15.75 1.4375H18.8175L12.1175 9.115L20 19.5625H13.8287L8.995 13.225L3.46375 19.5625H0.395L7.56125 11.35L0 1.4375H6.32875L10.6975 7.22875L15.75 1.4375ZM14.675 17.7225H16.375L5.40375 3.18125H3.58125L14.675 17.7225Z"
                                fill="black" />
                        </svg>
                    </a>
                    <a href="">
                        <svg class="ml-4" xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21"
                            fill="none">
                            <g clip-path="url(#clip0_10183_258)">
                                <path
                                    d="M20.0007 10.4998C20.0007 4.9769 15.5236 0.499756 10.0007 0.499756C4.47785 0.499756 0.000701904 4.9769 0.000701904 10.4998C0.000701904 15.491 3.65754 19.6281 8.4382 20.3783V13.3904H5.89914V10.4998H8.4382V8.29663C8.4382 5.79038 9.93117 4.40601 12.2154 4.40601C13.3091 4.40601 14.4538 4.60132 14.4538 4.60132V7.06226H13.1929C11.9507 7.06226 11.5632 7.83315 11.5632 8.62476V10.4998H14.3366L13.8933 13.3904H11.5632V20.3783C16.3439 19.6281 20.0007 15.491 20.0007 10.4998Z"
                                    fill="#4673F6" />
                            </g>
                            <defs>
                                <clipPath id="clip0_10183_258">
                                    <rect width="20" height="20" fill="white" transform="translate(0 0.5)" />
                                </clipPath>
                            </defs>
                        </svg>
                    </a>
                    <a href="">
                        <svg class="ml-4" xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21"
                            fill="none">
                            <g clip-path="url(#clip0_10183_260)">
                                <path
                                    d="M8.09577 13.4166V7.58329L12.9808 10.51L8.09577 13.4166ZM19.2988 6.47246C19.2988 6.47246 19.1075 5.08496 18.5221 4.47329C17.7788 3.67079 16.9459 3.66746 16.564 3.62079C13.83 3.41663 9.7282 3.41663 9.7282 3.41663H9.72005C9.72005 3.41663 5.61823 3.41663 2.88423 3.62079C2.50157 3.66746 1.66948 3.67079 0.925322 4.47329C0.33993 5.08496 0.149412 6.47329 0.149412 6.47329C0.149412 6.47329 -0.04599 8.10163 -0.04599 9.73079V11.26C-0.04599 12.89 0.149412 14.52 0.149412 14.52C0.149412 14.52 0.33993 15.9075 0.925322 16.5191C1.66948 17.3216 2.64568 17.2958 3.08045 17.38C4.64366 17.5358 9.72412 17.5833 9.72412 17.5833C9.72412 17.5833 13.83 17.5766 16.564 17.3733C16.9467 17.3258 17.7788 17.3225 18.5221 16.52C19.1083 15.9083 19.2988 14.52 19.2988 14.52C19.2988 14.52 19.4942 12.8908 19.4942 11.2608V9.73246C19.4942 8.10246 19.2988 6.47246 19.2988 6.47246Z"
                                    fill="#FF0000" />
                            </g>
                            <defs>
                                <clipPath id="clip0_10183_260">
                                    <rect width="20" height="20" fill="white" transform="translate(0 0.5)" />
                                </clipPath>
                            </defs>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="secondFooter">
                <span class="secondFont">PRODUCTS AND SERVICES</span>
                <a :href="prefix + '/about'" class="secondFont2">About us</a>
                <a class="secondFont2" style="color: #775CE1;">apkdock@support.com</a>
            </div>
            <div class="secondFooter">
                <span class="secondFont">LEGAL</span>
                <a :href="prefix + '/terms'" class="secondFont2">Terms of Service for Users</a>
                <a :href="prefix + '/privacy-policy'" class="secondFont2">Privacy & Cookies Policy</a>
            </div>
        </div>
        <div class="lastFooter">
            Copyright © 2025 APKDock All rights reserved.
        </div>
    </div>
</template>
<script setup>
const route = useRoute()
const prefix = ref(route.params.hasOwnProperty('language') ? '/' + route.params.language : '')
</script>
<style scoped>
.logo {
    width: 24px;
    height: 24px;
}

.footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding:24px 0;
}

.lastFooter {
    display: flex;
    max-width: var(--xl, 1280px);
    padding:12px 0;
    gap: 32px;
    border-top: 1px solid var(--Gray-100, #F3F4F6);
    color:#9DA2AD
}

.secondFont {
    color: var(--Text-Placeholder, #9DA2AD);
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 166.667% */
    text-transform: capitalize;
    margin-top: 15px;
}

.secondFont2 {
    color: var(--Text-Text, #505662);
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
}

.tabFont {
    color: var(--Brand, #775CE1);
    font-family: 'Rubik One', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px;
    margin-left: 6px;
}

.footerContainer {
    max-width: 1280px;
    margin: 0 auto;
}

.firstFooter {
    display: flex;
    flex-direction: column;
    width: 40%
}

.secondFooter {
    display: flex;
    flex-direction: column;
    width: 27%;
    gap: 16px
}

.description {
    margin: 20px 0;
    text-align: justify;
    word-break: keep-all;
    word-wrap: break-word;
    hyphens: none;
    color: var(--Text-Text, #505662);
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}

.icon {
    display: flex;
}

@media screen and (max-width: 996px) {
    .footer {
        flex-wrap: wrap;
    }

    .firstFooter {
        width: 100%;
    }

    .secondFooter {
        width: 45%;
    }
}

@media screen and (max-width: 768px) {
    .footer {
        flex-wrap: wrap;
    }

    .firstFooter {
        width: 100%;
    }

    .secondFooter {
        width: 100%;
    }
}
</style>